import React from "react";
import {
  StyleSheet,
  Text,
  Pressable,
  ActivityIndicator,
  View,
} from "react-native";
import Colors from "@/constants/colors";

import { useTheme } from "@/hooks/useTheme";

interface ButtonProps {
  title: string;
  onPress: () => void;
  variant?: "primary" | "secondary" | "outline" | "danger";
  size?: "small" | "medium" | "large";
  disabled?: boolean;
  loading?: boolean;
  icon?: React.ReactNode;
  fullWidth?: boolean;
}

export default function Button({
  title,
  onPress,
  variant = "primary",
  size = "medium",
  disabled = false,
  loading = false,
  icon,
  fullWidth = false,
}: ButtonProps) {
  const { colors } = useTheme();
  
  const getTextColor = () => {
    if (disabled) return "rgba(255, 255, 255, 0.5)";
    return variant === "outline" ? colors.text : colors.text;
  };

  const getBorderColor = () => {
    if (disabled) return colors.inactive;
    return variant === "outline" ? colors.primary : "transparent";
  };

  const getBackgroundColor = () => {
    if (disabled) return colors.inactive;
    switch (variant) {
      case "primary":
        return colors.primary;
      case "secondary":
        return colors.secondary;
      case "outline":
        return "rgba(99, 102, 241, 0.1)";
      case "danger":
        return colors.error;
      default:
        return colors.primary;
    }
  };
  const getButtonSize = () => {
    switch (size) {
      case "small":
        return {
          paddingVertical: 8,
          paddingHorizontal: 12,
          fontSize: 14,
        };
      case "large":
        return {
          paddingVertical: 16,
          paddingHorizontal: 24,
          fontSize: 18,
        };
      default:
        return {
          paddingVertical: 12,
          paddingHorizontal: 16,
          fontSize: 16,
        };
    }
  };
  const buttonSize = getButtonSize();
  return (
    <Pressable
      style={({ pressed }) => [
        styles.button,
        {
          backgroundColor: getBackgroundColor(),
          borderColor: getBorderColor(),
          paddingVertical: buttonSize.paddingVertical,
          paddingHorizontal: buttonSize.paddingHorizontal,
          opacity: pressed ? 0.8 : 1,
          width: fullWidth ? "100%" : "auto",
        },
      ]}
      onPress={onPress}
      disabled={disabled || loading}
    >
      <View style={styles.content}>
        {loading ? (
          <ActivityIndicator
            size="small"
            color={getTextColor()}
            style={styles.loader}
          />
        ) : icon ? (
          <View style={styles.iconContainer}>{icon}</View>
        ) : null}
        <Text
          style={[
            styles.text,
            {
              color: getTextColor(),
              fontSize: buttonSize.fontSize,
            },
          ]}
        >
          {title}
        </Text>
      </View>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    borderRadius: 8,
    justifyContent: "center",
    alignItems: "center",
    borderWidth: 1,
  },
  content: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    fontWeight: "600",
    textAlign: "center",
  },
  loader: {
    marginRight: 8,
  },
  iconContainer: {
    marginRight: 8,
  },
});
